<!-- 通用head -->
<head th:fragment=head(title)>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" th:href="@{/image/favicon.png}" href="../static/image/favicon.png">
    <title th:text="${title}"></title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="../static/lib/jquery/jquery.min.js" th:src="@{/lib/jquery/jquery.min.js}"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="../static/js/index.js" th:src="@{/js/index.js}"></script>
    <link rel="stylesheet" href="../static/css/base.css" th:href="@{/css/base.css}">
    <link rel="stylesheet" href="../static/css/fonts.css" th:href="@{/css/fonts.css}">
</head>

<!-- 顶部导航 -->
<header th:fragment="header">
    <div class="navbar-container">
        <a class="navbar-logo" th:href="@{/}" href="/">
            <img src="../static/image/logo.png" th:src="@{/image/logo.png}"/>
        </a>
        <ul id="navbar-menu">
            <li><a th:href="@{/}" href="/">首页</a></li>
            <li><a th:href="@{article}" href="article">技术分享</a></li>
            <li><a th:href="@{article}" href="article">程序源码</a></li>
            <li><a th:href="@{article}" href="article">站长推荐</a></li>
            <li><a th:href="@{article}" href="article">关于站长</a></li>
            <li><a th:href="@{article}" href="article">联系站长</a></li>
        </ul>
        <div class="search-container">
            <a href="#"><img src="../static/image/search.png" th:src="@{/image/search.png}"/></a>
        </div>
        <div class="nav-mobile-button">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </div>
    </div>
</header>

<!-- 移动端菜单面板 -->
<div th:fragment="mobile-nav">
    <ul id="side-out-right" class="side-nav">
        <li class="first-list">
            <div class="author">
                <img th:src="@{/image/head_img.jpg}" src="../static/image/head_img.jpg"/>
                <h3>北浪网络科技工作室</h3>
                <h6>用网站演绎你的企业精髓！</h6>
            </div>
        </li>
        <li>
            <a href="/">首页</a>
        </li>
        <li>
            <a th:href="@{article}">技术分享</a>
        </li>
        <li>
            <a th:href="@{article}">程序源码</a>
        </li>
        <li>
            <a th:href="@{article}">关于站长</a>
        </li>
        <li>
            <a th:href="@{article}">联系站长</a>
        </li>
    </ul>
</div>

<!-- 搜索面板 -->
<div th:fragment="search-panel">
    <form action="" method="get">
        <div class="search-box">
            <label class="close-btn" for="search">X</label>
            <input id="search-input" type="text" name="keywords" placeholder="搜索从这里开始..." />
        </div>
    </form>
</div>

<!-- 底部 -->
<footer th:fragment="footer">
    <div class="footer-social">
        <div class="social-list">
            <a href="#" th:href="@{#}" target="_blank"><i class="iconfont icon-dingyue"></i> 订阅</a>
            <a href="#" th:href="@{#}" target="_blank"><i class="iconfont icon-github-fill"></i> 仓库</a>
            <a href="#" th:href="@{#}" target="_blank"><i class="iconfont icon-QQ"></i> QQ</a>
            <a href="#" th:href="@{#}" target="_blank"><i class="iconfont icon-profile"></i> 简介</a>
            <a href="#" th:href="@{#}" target="_blank"><i class="iconfont icon-email"></i> 邮箱</a>
        </div>
    </div>
    <div class="footer-meta">
        <p>Powered by <a th:href="@{https://www.52blang.com}" href="https://www.52blang.com">北浪网络科技</a> | Copyright by
            BL-BLOG</p>
        <p><a th:href="@{https://beian.miit.gov.cn/}" href="https://beian.miit.gov.cn/">赣ICP备2021009091号</a></p>
    </div>
</footer>

<!-- 返回顶部 -->
<div th:fragment="scroll-to-top">
    <i class="iconfont icon-toTop-fill"></i>
</div>
